<template>
  <div class="left">
      <div class="mask"></div>
      <div class="main">
          <div :class="['navItem',{curr:shows[0]}]">
              <div class="title iconfont icon-monitor-1" @click="click(0)">
                  <p class="public_oneLine">综合监控</p>
              </div>
              <div class="content" :style="{display:shows[0]}">
                  <a class="item iconfont icon-point-1" href="http://www.baidu.com">1</a>
                  <a class="item iconfont icon-point-1" href="http://www.baidu.com">2</a>
                  <a class="item iconfont icon-point-1" href="http://www.baidu.com">3</a>
              </div>
          </div>
          <div :class="['navItem',{curr:shows[1]}]">
              <a class="title iconfont icon-monitor-1" href="http://www.baidu.com" @click="click(1)">
                  <p class="public_oneLine">综合监控</p>
              </a>
          </div>
          <div :class="['navItem',{curr:shows[2]}]">
              <div class="title iconfont icon-monitor-1" @click="click(2)">
                  <p class="public_oneLine">综合监控</p>
              </div>
              <div class="content" :style="{display:shows[2]}">
                  <a class="item iconfont icon-point-1" href="http://www.baidu.com">1</a>
                  <a class="item iconfont icon-point-1" href="http://www.baidu.com">2</a>
                  <a class="item iconfont icon-point-1" href="http://www.baidu.com">3</a>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data:function(){
    return {
      shows:[true,false,false]
    }
  },
    methods:{
      click(index){
        this.shows.splice(index,index+1,!this.shows[index])
      }
    }
};
</script>

<style scoped>
    a{text-decoration: none;}
    .public_oneLine{overflow: hidden;text-overflow: ellipsis;white-space:nowrap;}

    .left{position: absolute;top: 100px;left: 0;width: 55px ;bottom: 0;}
    .left .main{position: absolute;top: 0;left: 0;width: 55px;bottom: 0;transition: width .3s;background-color: rgb(180, 192, 255);overflow: hidden;}
    .left .main:hover{width: 300px;}
    .left .navItem{cursor: pointer;}
    .left .navItem .title{display: block;position: relative;padding-left: 55px;line-height: 50px;height: 50px;}
    .left .navItem .title:hover{background-color: rgba(0,0,255,.2);}
    .left .navItem .title::before{position: absolute;box-sizing:border-box;left: 15px;top: 10px;width: 30px;height: 30px;line-height: 30px;font-size: 25px;text-align: center;color: #000;border: 1px solid #000;}
    .left .navItem .title p{display: none;box-sizing:border-box;letter-spacing: 4px;padding-left: 20px;color: #000;}
    .left .navItem .content {display: none;}
    .left .navItem .content .item{display: block;padding-left: 90px;position: relative;height: 40px;line-height: 40px;text-align: left;transition:.3s;}
    .left .navItem .content .item::before{position: absolute;left: 5px;height: 100%;width: 50px;text-align: center;transition:.3s;}
    .left .navItem .content .item:hover{background-color: rgba(0,0,255,.2);}
    .left .navItem .content .item:hover::before{content: '\e67e';color: #198ccc;}
    .left .main:hover .navItem .title p{display: block;width: 245px;text-align: left;}

    .left .navItem.curr .title{background-color: #198ccc;}
    .left .navItem.curr .title::before{border-color: #fff;color: #fff;}
    .left .navItem.curr .title::after{content: '';position: absolute;left: 0;top: 0;bottom: 0;border-left: 5px solid #3bdaff;}
    .left .navItem.curr .title p{color: #fff;}
    .left .main:hover .navItem.curr .content{display: block;width: 300px;}
    .left .main:hover .mask{position: fixed;top: 100px;left: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,.3);z-index: -1;}

</style>
